<html>
<head>
<title>Web Turtle Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="livingcode.org/script/excanvas-compressed.js"></script><![endif]-->
<script type="text/javascript" src="webturtle.js"></script>
</head>
<body>
<canvas width="600" height="200" id="canvas" style="border: 1px solid black">
</canvas>
<textarea id="user_script" style="width: 600px; height: 200px;">
	// You can create global turtles either way
	turtle1 = new Turtle({x: 500, y: 50}, 180);
	turtle2 = new Turtle(); // defaults to 100,100 at 0 degrees
	// One way to add functionality
	function hex(turtle, length){
		for (var i = 0; i < 6; i++){
			turtle.left(60);
			turtle.forward(length);
		}
	}
	hex(turtle1, 30);
	hex(turtle2, 20);
	turtle1.penup(); turtle2.penup();
	turtle1.forward(200); turtle2.forward(200);
	turtle1.pendown(); turtle2.pendown();
	turtle1.hide(); turtle2.hide();
	// Another way to add functionality
	Turtle.prototype.triangle = function(length){
		for (var i = 0; i < 3; i++){
			this.right(120);
			this.forward(length);
		}
	};
	turtle1.triangle(30);
	turtle2.triangle(45);
	turtle1.show();turtle2.show();
</textarea>
<button onclick="canvas.eval_script('#user_script')" style="width: 400px; margin-left: 100px;">Run</button>
</body>
</html>
